<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>盒子模型</title>
    <style>
        a {
            text-decoration: none;
        }
        
        img {
            vertical-align: middle;
        }
        /* body,p,ul,ol,h1,h2,h3{
				margin: 0;
			}
			ul,ol{
				padding: 0;
				list-style: none;
			} */
        
        * {
            margin: 0;
            padding: 0;
        }
        /* 
			
			文本(文字 图片 视频 音频,)行元素 ,行内块元素 居中  给父级 添加 				text-align: center;
			
			 div 块元素 margin: 0 auto;
			 
			 上外边距合并
			 */
        
        div.box {
            width: 400px;
            height: 400px;
            background-color: #f00;
            margin: 50px auto;
            padding-top: 150px;
            box-sizing: border-box;
            /* overflow: hidden; /*溢出隐藏*/
            /* border: 1px solid transparent;
				box-sizing: border-box; /*怪异盒模型*/
        }
        
        .box1 {
            width: 100px;
            height: 100px;
            background-color: #0f0;
            margin: 0px auto;
        }
    </style>
</head>

<body>

    <div class="box">
        <div class="box1">
            sizingsizingsizingsizingsizingsizingsizingsizingsizing
        </div>
    </div>
    <!-- 
		内容区域  宽度 高度
			width: 300px;
			height: 300px;
		内边距  内容跟盒子边界的距离	
			padding:	一个值 四个方向  二个值 上下  左右   三个值  上  左右   下  四个值  上右下左
			padding-top  padding-left  padding-right  padding-bottom 单独设置各个方向的内边距
		边框	   
			border
			边框的样式  border-style: solid实线   dashed 虚线  dotted 点线  double 双线
		外边距  盒子跟外面的元素的距离
			margin
			margin:	一个值 四个方向  二个值 上下  左右   三个值  上  左右   下  四个值  上右下左
			margin-top  margin-left  margin-right  margin-bottom 单独设置各个方向的内边距
			盒子左右居中   margin: 0 auto;
		上外边距合并  父子盒子嵌套 他们的外边距会合并在一起  谁大听谁的
			① 给父级边框
			② 给父级 添加  overflow: hidden;
			③  给父级添加 上内边距 不用外边距
		 -->

</body>

</html>